<template>
  <el-card v-show="visible===3">
    <el-form label-width="100px">
      <el-form-item label="SPU 名称">
        <span>spu名称</span>
      </el-form-item>

      <el-form-item label="SKU 名称">
        <el-input type="text" v-model="skuInfo.skuName" placeholder="SKU 名称"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number" v-model="skuInfo.price" placeholder="价格(元)"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number" v-model="skuInfo.weight" placeholder="重量(千克)"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" v-model="skuInfo.skuDesc" placeholder="规格描述"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form inline label-width="100px">
          <el-form-item :label="item.attrName" v-for="item in attrList" :key="item.id">
            <el-select v-model="item.valueId" placeholder="请输入">
              <el-option :label="vItem.valueName" :value="vItem.id" 
                v-for="vItem in item.attrValueList" :key="vItem.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form inline label-width="100px">
          <el-form-item :label="item.saleAttrName" v-for="item in saleAttrList" :key="item.id">
            <el-select v-model="item.valueId" placeholder="请输入">
              <el-option :label="vItem.saleAttrValueName" :value="vItem.id" 
                v-for="vItem in item.spuSaleAttrValueList" :key="vItem.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table
          border
          :data="imageList"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="80">
          </el-table-column>

          <el-table-column
            label="图片">
            <template v-slot="{row}">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.imgUrl" />
            </template>
          </el-table-column>

          <el-table-column
            prop="imgName"
            label="名称" >
          </el-table-column>

          <el-table-column
            label="操作">
            <template v-slot="{row}">
              <el-tag disable-transitions v-if="row.isDefault==='1'" type="success">默认</el-tag>
              <el-button v-else type="primary" size="small" @click="setDefault(row)">设为默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>

    </el-form>
  </el-card>
</template>

<script>

export default {
  name: 'SkuForm',
  props: ['visible'],
  data () {
    return {
      spu: {}, // 当前要添加的sku所属的spu对象
      skuInfo: {
        // 父组件传入
        "category3Id": null, // 3级分类的id
        "spuId": null, // spu的id
        "tmId": null, // 品牌的id

        // v-model自动收集
        "skuName": null, // sku的名称
        "skuDesc": null, // 描述
        "price": null, // 价格
        "weight": null, // 重量


        "skuDefaultImg": null,
        "skuAttrValueList": [
          // {
          //   "attrId": "2",
          //   "valueId": "9"
          // }
        ],
        "skuSaleAttrValueList": [
          // {
          //   "saleAttrValueId": 258
          // }
        ],
        "skuImageList": [
          // {
          //   "imgName": "下载 (1).jpg",
          //   "imgUrl": "http://47.93.148.192:8080/xxx.jpg",
          //   "spuImgId": 337, // 当前Spu图片的id
          //   "isDefault": "1"   // 默认为"1", 非默认为"0"
          // }
        ]
      },

      attrList: [], // 平台属性列表
      saleAttrList: [], // spu销售属性列表
      imageList: [], // spu图片列表
      selectedImageList: [], // 选中的图片列表
    }
  },

  methods: {

    /* 
    保存当前添加的sku
    */
    async save () {

      /* 在发请求前, 整理数据skuInfo对象 */
      const {skuInfo, attrList, saleAttrList, selectedImageList} = this
      /* 
      整理1:   
        目标数据: skuInfo.skuAttrValueList
          {
                "attrId": "2",
                "valueId": "9"
              }
        当前数据:  attrList
          {
            id,
            valueId, // 可能没有
            ....
          }
      */
      attrList.forEach(item => {
        if (item.valueId) {
          skuInfo.skuAttrValueList.push({
            attrId: item.id,
            valueId: item.valueId
          })
        }
      })

      /* 
      整理2:
      目标数据: skuInfo.skuSaleAttrValueList
        {
          "saleAttrValueId": "2",
        }
      当前数据:  saleAttrList
        {
          valueId,  // 可能没有
        }
      */
      skuInfo.skuSaleAttrValueList = saleAttrList.reduce((pre, item) => {
        if (item.valueId) {
          pre.push({
            saleAttrValueId: item.valueId
          })
        }
        return pre
      }, [])

      /* 
    整理3:
      目标数据: skuInfo.skuImageList
        {
              "imgName": "下载 (1).jpg",
              "imgUrl": "http://47.93.148.192:8080/xxx.jpg",
              "spuImgId": 337, // 当前Spu图片的id
              "isDefault": "1"   // 默认为"1", 非默认为"0"
            }
      当前数据:  selectedImageList
        {
              "id": 333,
              "spuId": 26,
              "imgName": "rBHu8l6UcKyAfzDsAAAPN5YrVxw870.jpg",
              "imgUrl": "http://47.93.148.192:8080/xxx.jpg"
              isDefault : "1" / "0", // '1'代表默认, '0'非默认
            }
      */
      this.skuInfo.skuImageList = selectedImageList.map(item => ({
        "imgName": item.imgName,
        "imgUrl": item.imgUrl,
        "spuImgId": item.id, // 当前Spu图片的id
        "isDefault": item.isDefault  // 默认为"1", 非默认为"0"
      }))

      /* 
      请求添加sku的接口: sku.addUpdate (skuInfo)
      */
      await this.$API.sku.addUpdate (skuInfo)

      // 请求成功后的处理
      this.$message.success('保存sku成功!')
      // 返回到spu列表页面(分发事件)
      this.$emit('update:visible', 1)
      // 重置数据
      this.resetData()
      // 通知父组件保存成功
      this.$emit('success')
    },

    cancel () {
      // 返回到spu列表页面(分发事件)
      this.$emit('update:visible', 1)
      // 重置数据
      this.resetData()
      // 通知父组件取消了
      this.$emit('cancel')
    },

    /* 
    重置data数据
    */
    resetData () {
      this.spu = {} // 当前要添加的sku所属的spu对象
      this.skuInfo = {
        // 父组件传入
        "category3Id": null, // 3级分类的id
        "spuId": null, // spu的id
        "tmId": null, // 品牌的id

        // v-model自动收集
        "skuName": null, // sku的名称
        "skuDesc": null, // 描述
        "price": null, // 价格
        "weight": null, // 重量
        "skuDefaultImg": null,
        "skuAttrValueList": [],
        "skuSaleAttrValueList": [],
        "skuImageList": []
      }

      this.attrList = [] // 平台属性列表
      this.saleAttrList = [] // spu销售属性列表
      this.imageList = [] // spu图片列表
      this.selectedImageList = [] // 选中的图片列表
    },

    /* 
    勾选状态发生了改变时的监听回调
    value: 所有当前选中的数据列表
    */
    handleSelectionChange (value) {
      this.selectedImageList = value
    },

    /* 
    设置当前图片为默认的
    */
    setDefault (row) {
      // 先将所有image对象的isDefault变为'0', 再将当前的变为'1'
      this.imageList.forEach(item => item.isDefault = '0')
      row.isDefault = '1'

			// 将当前图片的imgUrl保存到skuInfo.skuDefaultImg
      this.skuInfo.skuDefaultImg = row.imgUrl
    },

    initAddData (spu) {
      // 保存数据
      this.spu = spu
      this.skuInfo.category3Id = spu.category3Id
      this.skuInfo.spuId = spu.id
      this.skuInfo.tmId = spu.tmId
      // 发请求获取数据更新
      this.getAddData()
    },

    /* 
    请求获取数据
    1. 获取平台属性列表: attr.getList(category1Id, category2Id, category3Id)  attrList
    2. 获取销售属性列表: sku.getSpuSaleAttrList (spuId)  saleAttrList
    3. 获取图片列表: sku.getSpuImageList (spuId)  imageList

    3个请求都成功后, 才去读取数据更新: Promise.all([p1, p2, p3]).then(results => {   })
    */
    async getAddData () {
      const {category1Id, category2Id, category3Id, id} = this.spu
      // 批量发送3个请求
      const p1 = this.$API.attr.getList(category1Id, category2Id, category3Id)
      const p2 = this.$API.sku.getSpuSaleAttrList (id)
      const p3 = this.$API.sku.getSpuImageList (id)
      // 等3个请求都成功了才更新数据
      const results = await Promise.all([p1, p2, p3])

      this.attrList = results[0].data
      this.saleAttrList = results[1].data
      const imageList = results[2].data
      // 给每个图片对象添加一个isDefault属性, 值为'0'  ==> 方便后面可以直接修改isDefault属性值, 而不需要使用$set
      imageList.forEach(item => {
        item.isDefault = '0'
      })
      this.imageList = imageList
    }
  }
}
</script>

<style scoped>

</style>
